<template>
  <div :class="classes || ''" class="bg-white-6 column no-wrap shadow-1 border-8 q-pa-md relative-position">
    <div class="row items-center text-subtitle1 text-bold relative-position">
      {{ $t('TaskCore.MaintenanceTask') }}
      <q-space></q-space>
    </div>
    <q-btn v-if="infoVisible" class="q-btn-tip absolute-top-right q-mr-md q-mt-sm" dense fab-mini flat icon="reply_all"
           round @click="infoVisible = false">
      <q-tooltip v-bind="$tooltipAttr">{{ $t('GoBack') }}</q-tooltip>
    </q-btn>
    <q-separator class="q-my-sm"></q-separator>
    <div class="col column no-wrap relative-position">
      <q-tabs v-model="currentTab" active-color="indigo-14" align="justify" class="relative-position" dense>
        <q-tab v-for="col in columns" :key="col.name" class="rounded-borders" v-bind="col"></q-tab>
        <q-separator class="absolute-bottom full-width"></q-separator>
      </q-tabs>
      <q-tab-panels v-model="currentTab" animated class="bg-transparent col full-width">
        <q-tab-panel v-for="col in columns" :key="col.name" class="no-padding fit overflow-hidden" v-bind="col">
          <component :is="col.component" @click="handleClick"></component>
        </q-tab-panel>
      </q-tab-panels>
      <transition name="q-transition--scale">
        <div v-if="infoVisible" class="absolute-full z-top bg-grey-1">
          <component :is="component" v-model="infoVisible" :searchForm="formInfo"></component>
        </div>
      </transition>
    </div>
  </div>
</template>
<script setup>
import { i18n } from 'boot/i18n.js'
import PendingExecution from 'pages/Dashboard/Console/PendingExecution.vue'
import PendingExecutionMaintenance from 'pages/Dashboard/Console/PendingExecutionMaintenance.vue'
import PendingTrigger from 'pages/Dashboard/Console/PendingTrigger.vue'
import PendingTriggerMaintenance from 'pages/Dashboard/Console/PendingTriggerMaintenance.vue'
import { computed, ref } from 'vue'

defineProps({ classes: String })

const action = ref('')
const formInfo = ref({})
const infoVisible = ref(false)
const currentTab = ref('exec')
const component = computed(() => {
  if (!infoVisible.value) return void 0
  if (action.value === 'exec') return PendingExecutionMaintenance
  if (action.value === 'tgr') return PendingTriggerMaintenance
  return void 0
})
const columns = computed(() => {
  return [{
    label: `${i18n.t('TaskCore.MaintenanceTaskTip1')}`, name: 'exec', component: PendingExecution
  }, {
    label: `${i18n.t('TaskCore.MaintenanceTaskTip2')}`, name: 'tgr', component: PendingTrigger
  }]
})

const handleClick = (params = {}) => {
  action.value = params.action
  formInfo.value = params
  infoVisible.value = true
}
</script>